<template>
  <view class="login-page">
    <view class="login-container">
      <view class="slogan">
        <view class="app-title">漂流瓶</view>
        <view class="subtitle">致未来的你，或陌生的灵魂</view>
      </view>

      <view class="form-container">
        <view class="input-group">
          <input 
            type="text" 
            class="form-input" 
            v-model="accountInput" 
            placeholder="手机号 / 邮箱"
          >
        </view>
        
        <view class="input-group">
          <input 
            type="text" 
            class="form-input" 
            v-model="codeInput" 
            placeholder="验证码"
          >
          <button 
            class="get-code-btn" 
            :disabled="!canGetCode || countdown > 0"
            @click="getVerificationCode"
          >
            {{ countdown > 0 ? `${countdown}s` : '获取验证码' }}
          </button>
        </view>

        <button 
          class="login-button" 
          :disabled="!canLogin"
          @click="handleLogin"
        >
          登录 / 注册
        </button>
        
        <view class="divider">或</view>

        <button 
          class="wechat-button" 
          @click="handleWechatLogin"
        >
          微信一键登录
        </button>
      </view>
    </view>
  </view>
</template>

<script>
import { useUserStore } from '@/store/user'

export default {
  name: 'LoginPage',
  data() {
    return {
      accountInput: '',
      codeInput: '',
      countdown: 0,
      timer: null
    }
  },
  computed: {
    canGetCode() {
      return this.accountInput.trim().length > 0
    },
    canLogin() {
      return this.accountInput.trim().length > 0 && this.codeInput.trim().length >= 4
    }
  },
  methods: {
    /**
     * 获取验证码
     */
    getVerificationCode() {
      if (!this.canGetCode) {
        uni.showToast({
          title: '请输入手机号或邮箱',
          icon: 'none'
        })
        return
      }
      
      this.countdown = 60
      this.timer = setInterval(() => {
        this.countdown--
        if (this.countdown <= 0) {
          clearInterval(this.timer)
          this.timer = null
        }
      }, 1000)
      
      uni.showToast({
        title: '验证码已发送',
        icon: 'success'
      })
    },
    
    /**
     * 处理普通登录
     */
    async handleLogin() {
      if (!this.canLogin) return
      
      uni.showLoading({ title: '登录中...' })
      
      try {
        const userStore = useUserStore()
        const result = await userStore.login({
          account: this.accountInput,
          code: this.codeInput
        })
        
        if (result.success) {
          uni.showToast({
            title: '登录成功',
            icon: 'success'
          })
          
          setTimeout(() => {
            uni.reLaunch({
              url: '/pages/home/index'
            })
          }, 1500)
        } else {
          uni.showToast({
            title: result.message || '登录失败',
            icon: 'error'
          })
        }
      } catch (error) {
        console.error('登录失败:', error)
        uni.showToast({
          title: '登录失败',
          icon: 'error'
        })
      } finally {
        uni.hideLoading()
      }
    },
    
    /**
     * 处理微信登录
     */
    async handleWechatLogin() {
      uni.showLoading({ title: '正在拉起微信授权...' })
      
      try {
        const userStore = useUserStore()
        const result = await userStore.wechatLogin()
        
        if (result.success) {
          uni.showToast({
            title: '微信授权成功',
            icon: 'success'
          })
          
          setTimeout(() => {
            uni.reLaunch({
              url: '/pages/home/index'
            })
          }, 2000)
        } else {
          uni.showToast({
            title: result.message || '微信登录失败',
            icon: 'error'
          })
        }
      } catch (error) {
        console.error('微信登录失败:', error)
        uni.showToast({
          title: '微信登录失败',
          icon: 'error'
        })
      } finally {
        uni.hideLoading()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.login-page {
  min-height: 100vh;
  background: linear-gradient(180deg, var(--primary-bg) 0%, var(--secondary-bg) 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40rpx;
}

.login-container {
  width: 100%;
  max-width: 600rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--text-light);
  animation: fadeIn 0.6s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(40rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slogan {
  text-align: center;
  margin-bottom: 120rpx;
  
  .app-title {
    font-size: 64rpx;
    font-weight: 500;
    color: var(--text-light);
    margin-bottom: 20rpx;
  }
  
  .subtitle {
    font-size: 36rpx;
    color: var(--text-dark);
  }
}

.form-container {
  width: 100%;
}

.input-group {
  margin-bottom: 40rpx;
  position: relative;
  
  .form-input {
    width: 100%;
    padding: 30rpx;
    background-color: rgba(255, 255, 255, 0.1);
    border: 2rpx solid var(--text-dark);
    border-radius: 20rpx;
    color: var(--text-light);
    font-size: 32rpx;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
    
    &:focus {
      border-color: var(--accent-gold);
    }
    
    &::placeholder {
      color: var(--text-dark);
    }
  }
  
  .get-code-btn {
    position: absolute;
    right: 30rpx;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--accent-gold);
    font-size: 28rpx;
    
    &:disabled {
      color: var(--text-dark);
    }
  }
}

.login-button {
  width: 100%;
  padding: 30rpx;
  background-color: var(--accent-gold);
  border: none;
  border-radius: 20rpx;
  color: var(--primary-bg);
  font-size: 32rpx;
  font-weight: 500;
  transition: all 0.3s ease;
  
  &:disabled {
    background-color: var(--text-dark);
    color: #aaa;
  }
  
  &:not(:disabled):active {
    transform: scale(0.98);
  }
}

.divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--text-dark);
  margin: 80rpx 0;
  
  &::before,
  &::after {
    content: '';
    flex: 1;
    border-bottom: 1rpx solid var(--text-dark);
  }
  
  &::before {
    margin-right: 20rpx;
  }
  
  &::after {
    margin-left: 20rpx;
  }
}

.wechat-button {
  width: 100%;
  padding: 30rpx;
  background-color: var(--wechat-green);
  border: none;
  border-radius: 20rpx;
  color: white;
  font-size: 32rpx;
  font-weight: 500;
  transition: all 0.3s ease;
  
  &:active {
    transform: scale(0.98);
  }
}
</style> 